<template>
  <div id="detail_bottomnavbar">
    <div class="l1">
      <div class="item">
        <i class="iconfont icon-service-fill"></i>
        <div>客服</div>
      </div>
      <div class="item">
        <i class="iconfont icon-home"></i>
        <div>店铺</div>
      </div>
      <div class="item">
        <i class="iconfont icon-gift"></i>
        <div>收藏</div>
      </div>
    </div>
    <div class="m1" @click="toshoppingcar">
      <div>加入购物车</div>
    </div>
    <div class="r1">
      <div>购买</div>
    </div>
  </div>
   
</template>

<script>
export default {
  // 组件名称
  name: "detail_bottomnavbar", // 组件参数 接收来自父组件的数据
  props: {}, // 局部注册的组件
  components: {}, // 组件状态值
  data() {
    return {};
  },
  methods: {
    // 点击加入购物车发送自定义事件到父组件
    toshoppingcar() {
      this.$emit("addcar");
    },
  },
};
</script>
<style scoped>
@import "~assets/css/font/iconfont.css";
#detail_bottomnavbar {
  display: flex;
  position: fixed;
  height: 49px;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 6666;
  background-color: #fff;
}
.l1 {
  display: flex;
  flex: 50%;
  justify-content: space-evenly;
}
.m1 {
  display: flex;
  flex: 25%;
  background-color: orange;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  line-height: 49px;
}
.r1 {
  display: flex;
  flex: 25%;
  background-color: palevioletred;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  line-height: 49px;
}
.item {
  text-align: center;
  font-size: 14px;
}
i {
  color: palevioletred;
}
</style>